<template>
	<a-modal :width="750" :visible="visible" @ok="handleOk" @cancel="handleClose" centered>
		<div class="form_con">
			<div class="form_item">
				<div class="form_title">
					自动随机特效：<a-switch v-model:checked="filterForm.random" />
				</div>
				<div class="form_desc">开启后当前场景将随机选用下方特效</div>
			</div>
		</div>

		<div class="line"></div>

		<div class="form_con">
			<div class="form_item">
				<div class="form_title">自选特效</div>
				<div class="form_desc">将随机选用已选择的特效</div>
				<div class="selected-effect-con">
					<a-tag v-for="(item, index) in selectedEffectList" closable color="error"
						@close.prevent="() => handleCancelSelect(index)">
						{{ JSON.parse(item)?.material_name }}</a-tag>
				</div>
			</div>
		</div>
		<div class="form_con" style="height: 360px">
			<a-checkbox-group v-model:value="selectedEffectList">
				<div class="form_item" v-for="(item, index) in effectList" :key="index">
					<div class="form_title">{{ item.name }}</div>
					<div class="filter_con">
						<div class="filter-item" :class="filterForm.random ? 'filter-item-disabled' : ''"
							v-for="(effect_item, effect_index) in item.materials" :key="effect_index">
							<label>
								<a-checkbox :disabled="filterForm.random" v-show="!filterForm.random"
									class="filter-checkbox" :value="JSON.stringify(effect_item)">
								</a-checkbox>
								<div class="filter_img">
									<video @mouseenter="handleMouseEnter" :autoplay="true" :controls="false"
										:src="effect_item.material_url"></video>
								</div>
								<div class="filter_name">{{ effect_item.material_name }}</div>
							</label>
						</div>
					</div>
				</div>
			</a-checkbox-group>
		</div>
	</a-modal>
</template>

<script>
	import {
		defineComponent,
		reactive,
		toRefs,
		watch
	} from "vue";
	import request from "@/common/utils/request";
	export default defineComponent({
		props: {
			visible: {
				type: Boolean,
				default: false,
			},
			senceItem: {
				type: Object,
				default: () => {
					return {};
				},
			},
			data: {
				type: Object,
				default: () => {},
			},
		},

		setup(props, context) {
			const state = reactive({
				filterForm: {
					random: false,
				},
				selectedEffectList: [],
				effectList: [],
			});

			const handleOk = () => {
				context.emit("submit", {
					random: state.filterForm.random,
					sub_types: state.selectedEffectList.map((item) => JSON.parse(item)),
				});
				context.emit("close");
			};

			const handleClose = () => {
				context.emit("close");
			};

			watch(
				() => state.filterForm.random,
				(val) => {
					if (val) {
						state.selectedEffectList = [];
					}
				}
			);

			const handleCancelSelect = (index) => {
				state.selectedEffectList.splice(index, 1);
			};

			// 选择特效
			const handleSelectChange = (selectedItem) => {
				if (selectedItem.checked) {
					state.selectedEffectList.push(selectedItem);
				} else {
					state.selectedEffectList = state.selectedEffectList.filter(
						(it) => it.id !== selectedItem.id
					);
				}
			};

			const getEffectList = () => {
				// 视频特效列表
				request
					.get("/work_ai", "/user/shotstack/material/effects/list")
					.then((res) => {
						state.effectList = res.result;
						state.effectList.forEach((it) => {
							it?.materials?.forEach((item) => {
								const findIndex = state.selectedEffectList?.findIndex(
									(i) => JSON.parse(i).id === item.id
								);
								if (findIndex > -1) {
									state.selectedEffectList[findIndex] = JSON.stringify(
										item);
								}
							});
						});
					});
			};

			const handleMouseEnter = (e) => {
				e.target.currentTime = 0;
				e.target?.play();
			};

			watch(
				() => props.visible,
				(visible) => {
					const {
						data
					} = props;
					if (visible) {
						state.filterForm.random = data?.random || false;
						state.selectedEffectList = data?.sub_types?.map((item) =>
							JSON.stringify(item)
						);
						getEffectList();
					}
				}
			);

			return {
				...toRefs(state),
				handleOk,
				handleClose,
				handleCancelSelect,
				handleSelectChange,
				handleMouseEnter,
			};
		},
	});
</script>

<style lang="less" scoped>
	.operate_con {
		display: flex;
		align-items: center;

		.left_con {
			display: flex;
			align-items: center;
		}

		.right_con {
			display: flex;
			align-items: center;
			margin-left: 100px;
		}
	}

	.line {
		width: 100%;
		height: 1px;
		background-color: #eee;
		border: none;
		margin: 15px 0;
	}

	.form_con {
		overflow-y: scroll;

		&::-webkit-scrollbar {
			width: 6px;
		}

		&::-webkit-scrollbar-track {
			width: 5px;
			background-color: transparent;
			-webkit-border-radius: 4px;
			-moz-border-radius: 4px;
			border-radius: 4px;
		}

		&::-webkit-scrollbar-thumb {
			background-color: rgba(193, 193, 193, 0.5);
			background-clip: padding-box;
			min-height: 28px;
			-webkit-border-radius: 4px;
			-moz-border-radius: 4px;
			border-radius: 4px;
		}

		.form_item {
			margin-top: 10px;

			.form_title {
				color: #333;
				font-weight: bold;
				font-size: 14px;
			}

			.form_desc {
				color: #999;
				font-size: 12px;
			}

			.selected-effect-con {
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;
				align-items: center;
				margin: 10px 0;

				&>span {
					margin-right: 20px;
					margin-bottom: 10px;
				}
			}

			.filter_con {
				display: flex;
				flex-wrap: wrap;
				margin-top: 10px;
				transform: translateX(-10px);

				.filter-item {
					position: relative;
					margin-left: 10px;
					margin-top: 10px;
					display: flex;
					flex-direction: column;
					cursor: pointer;

					&.filter-item-disabled {
						.filter_img video {
							filter: grayscale(0.5);
						}

						.filter_name {
							filter: grayscale(0.5);
						}
					}

					&:hover {
						.filter-checkbox {}
					}

					.filter-checkbox {
						position: absolute;
						right: 5px;
						top: 0;
					}

					.filter_img video {
						width: 106px;
						height: 60px;
						border-radius: 4px;
						cursor: pointer;
					}

					.filter_name {
						color: #666;
						margin-top: 5px;
					}
				}
			}
		}
	}
</style>